<template>
  <div>
    <!-- 轮播图 -->
    <film-swiper>
      <div class="swiper-slide" v-for="(data, index) in imgList" :key="index">
        <div class="swiper-image" :style="{backgroundImage: `url(${data})`}"></div>
      </div>
    </film-swiper>
    <!-- 内容区域 -->
    <film-header></film-header>
    <!-- 子路由页面 -->
    <router-view></router-view>
  </div>
</template>
<script>
import FilmSwiper from '../components/FilmSwiper.vue'
import FilmHeader from '../components/FilmHeader.vue'

export default {
  name: 'Film',
  components: { FilmSwiper, FilmHeader },
  data() {
    return {
      imgList: [
        'https://pic.maizuo.com/usr/movie/0c4f970711121b4261138f8c81c8bc47.jpg',
        'http://124.223.69.156:5500/h5-02.jpg',
        'http://124.223.69.156:5500/h5-03.png'
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.swiper-image {
  height: 200px;
  background-size: cover;
  background-position: center center;
}
</style>